<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <div style="display: flex; align-items: center">
        <span style="color: red; margin-right: 5px" v-if="required">*</span>
        <div style="flex: 1">{{ name }}</div>
        <div style="margin-left: 60px; color: red">{{ data.displayName }}</div>
      </div>
    </div>
    <el-table :data="data.charges" stripe border highlight-current-row show-summary>
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column label="费用类型">
        <template slot-scope="scope">
          {{ scope.row.CHTY_EnumTxt }}
        </template>
      </el-table-column>
      <el-table-column label="金额(元)" prop="CSCG_Fee">
        <template slot-scope="scope">
          {{ scope.row.CSCG_Fee }}
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          {{ scope.row.CSCG_Remark }}
        </template>
      </el-table-column>
      <el-table-column width="80px">
        <template slot="header">
          <el-button size="medium" type="text" slot="reference" icon="el-icon-plus" :disabled="disabled"
            @click="addChargeVis = true"></el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" :disabled="disabled" @click="
            editCharge = scope.row
          editChargeVis = true
            "></el-button>
          <el-button type="text" icon="el-icon-delete" :disabled="disabled"
            @click="removeCharge(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="addChargeVis" width="620px" :title="'新增' + name" :modal-append-to-body="false">
      <el-form label-width="auto" label-position="right">
        <el-form-item label="类型">
          <div style="display: flex">
            <el-select style="flex: 1" v-model="newCharge.CSCG_TypeID" placeholder="请选择费用类型">
              <el-option v-for="item in chargeTypes" :key="item.CHTY_ID" :label="item.CHTY_EnumTxt"
                :value="item.CHTY_EnumValue"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="金额(元)">
          <div style="display: flex">
            <el-input-number style="flex: 1" v-model="newCharge.CSCG_Fee" :precision="2"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newCharge.CSCG_Remark" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addCharge">新增</el-button>
          <el-button type="text" @click="addChargeVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="editChargeVis" width="620px" :title="'修改' + name" :modal-append-to-body="false">
      <el-form label-width="auto" label-position="right" v-if="editCharge">
        <el-form-item label="类型">
          <div style="display: flex">
            <el-select style="flex: 1" v-model="editCharge.CSCG_TypeID" placeholder="请选择费用类型" @input="
              editCharge.CHTY_EnumTxt = chargeTypes.find(
                (x) => x.CHTY_EnumValue == editCharge.CSCG_TypeID
              ).CHTY_EnumTxt
            input()
              ">
              <el-option v-for="item in chargeTypes" :key="item.CHTY_ID" :label="item.CHTY_EnumTxt"
                :value="item.CHTY_EnumValue"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="金额(元)">
          <div style="display: flex">
            <el-input-number style="flex: 1" v-model="editCharge.CSCG_Fee" :precision="2"
              @input="input"></el-input-number>
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editCharge.CSCG_Remark" placeholder="请输入备注" @input="input"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getChargeTypes } from '@/api/flowCenter/field/caseChargeDetail'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        charges: [],
        displayName: '',
      },
      newCharge: {
        CSCG_TypeID: null,
        CHTY_EnumTxt: null,
        CSCG_Fee: null,
        CSCG_Remark: null,
      },
      editCharge: null,
      addChargeVis: false,
      editChargeVis: false,
      chargeTypes: [],
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '案件费用'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '案件费用'
        }
      }
      return '案件费用'
    },
  },
  methods: {
    getChargeTypes() {
      getChargeTypes().then(({ data }) => {
        this.chargeTypes = data
      })
    },
    addCharge() {
      this.newCharge.CHTY_EnumTxt = this.chargeTypes.find(
        (x) => x.CHTY_EnumValue == this.newCharge.CSCG_TypeID
      ).CHTY_EnumTxt
      this.data.charges.push({ ...this.newCharge })
      this.addChargeVis = false
      this.input()
    },
    removeCharge(index) {
      this.data.charges.splice(index, 1)
      this.input()
    },
    input() {
      let sum = 0
      this.data.charges.forEach((x) => {
        sum += Number(x.CSCG_Fee)
      })
      this.data.displayName = `合计${sum}元`
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    this.getChargeTypes()
    if (this.value) {
      this.data = JSON.parse(this.value)
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>